<script lang="ts">
import * as echarts from 'echarts';
import { ECharts } from '@peng_kai/kit/vue/components';
import { zip } from '@peng_kai/kit/libs/lodash-es';
import SelectChartPeriod from './SelectChartPeriod.vue';
import { formatNumber } from '~/utils/number';

function useChartData() {
  const queryParams = reactive<Api.GetParam<typeof apis.apiInviteProfitChartLine>>({
    time_type: 0,
    channel_id: '',
  });
  const profitChartQry = useQuery({
    queryKey: [apis.apiInviteProfitChartLine.id, queryParams],
    queryFn: () => apis.apiInviteProfitChartLine(queryParams),
  });
  const profitChartData = computed(() => profitChartQry.data.value);
  const isEmpty = computed(() => !profitChartData.value?.axis_data?.length);
  const echartsOption = computed(() => {
    const data = zip(profitChartData.value?.axis_data, profitChartData.value?.profit_amount);

    return {
      useUTC: true,
      locale: 'UTC',
      color: ['#80FFA5'],
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#26272E',
        borderColor: '#26272E',
        confine: true,
        textStyle: {
          color: '#fff', // 自定义文字颜色
        },
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
        valueFormatter: (v: string) => `$${bignumber(formatNumber(v, 3)).toFormat()}`,
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '0',
        top: '0',
        containLabel: true,
      },
      xAxis: {
        show: true,
        type: 'time',
        boundaryGap: false,
        axisLine: {
          show: false,
          lineStyle: {
            width: 2, // 设置轴线的宽度
            type: 'solid', // 设置轴线的类型（实线、虚线等）
          },
        },
        axisPointer: {
          show: true,
          label: {
            formatter: (attrs: any) => dayjs(attrs.value).format('YYYY-MM-DD'),
          },
        },
        axisTick: {
          show: true,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#31323b',
          },
        },
      },
      yAxis: [
        {
          show: false,
          type: 'value',
          axisLabel: {
            show: false, // 隐藏 x 轴刻度标签
          },
          axisTick: {
            show: false, // 隐藏 x 轴刻度线
          },
          boundaryGap: false,
          axisLine: { onZero: false },
        },
      ],
      series: [
        {
          name: $t('enYpw43ayAWyyX8n4eUa'),
          type: 'line',
          stack: 'Total',
          smooth: true,
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(4, 126, 49 ,1)' },
              { offset: 1, color: 'rgba(38, 40, 47,0.7 )' },
            ]),
          },
          lineStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: 'rgb(121, 127, 145 )' },
              { offset: 1, color: 'rgb(34, 197, 94)' },
            ]),
            cap: 'round',
          },
          emphasis: {
            focus: 'series',
          },
          data,
        },
      ],
    };
  });

  return {
    queryParams,
    profitChartQry,
    profitChartData,
    isEmpty,
    echartsOption,
  };
}
</script>

<script lang="ts" setup>
const { channelListForAntdSelectOptions } = queries.useInviteChannelQuery();
const { profitChartData, queryParams, profitChartQry, isEmpty, echartsOption } = useChartData();
</script>

<template>
  <TCard>
    <template #header>
      <div class="w-full flex-between">
        <span>{{ $t('t6EaBaE5rr17Spu0w8gB') }}</span>
        <TAntdTheme component="Select" theme="light">
          <ASelect
            v-model:value="queryParams.channel_id"
            class="w-35" :virtual="false"
            :options="channelListForAntdSelectOptions"
          />
        </TAntdTheme>
      </div>
    </template>

    <template #default>
      <div class="grid grid-cols-[1fr_auto] gap-3">
        <TSuspenseView
          v-bind="buildSvPropsOfQuery(profitChartQry, { isEmptyFn: () => isEmpty })"
          class="relative" emptyClass="!p-0"
          :emptyMsg="$t('ouZm9W7zopH2PmKqleAix')"
        >
          <ECharts class="!abs-full isolate" :echartOption="echartsOption" />
        </TSuspenseView>

        <SelectChartPeriod v-model:value="queryParams.time_type" class="w-17" />

        <div v-if="!isEmpty" class="text-center text-sm text-sys-text-body">
          {{ $t('jhqioldMthMkIlvrwsylo') }}:
          <TAmount :value="profitChartData?.total_profit_amount" symbol="$" format="max-dec" :decimals="2" iconPos="left" />
        </div>
      </div>
    </template>
  </TCard>
</template>
